@import 'tailwindcss';

@custom-variant dark (&:where(.dark, .dark *));

@source "../node_modules/flowbite-svelte-icons/dist";
@source "../node_modules/svelte-animated-icons/dist";
@source "../node_modules/svelte-5-ui-lib/dist";

@theme {
  --z-index-100: 100;
  --color-primary-50: #fff5f2;
  --color-primary-100: #fff1ee;
  --color-primary-200: #ffe4de;
  --color-primary-300: #ffd5cc;
  --color-primary-400: #ffbcad;
  --color-primary-500: #fe795d;
  --color-primary-600: #ef562f;
  --color-primary-700: #eb4f27;
  --color-primary-800: #cc4522;
  --color-primary-900: #a5371b;

  --color-secondary-50: #f0f9ff;
  --color-secondary-100: #e0f2fe;
  --color-secondary-200: #bae6fd;
  --color-secondary-300: #7dd3fc;
  --color-secondary-400: #38bdf8;
  --color-secondary-500: #0ea5e9;
  --color-secondary-600: #0284c7;
  --color-secondary-700: #0369a1;
  --color-secondary-800: #075985;
  --color-secondary-900: #0c4a6e;

  --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --color-red-50: #fef2f2;
  --color-red-100: #ffe2e2;
  --color-red-200: #ffcaca;
  --color-red-300: #ffa3a3;
  --color-red-400: #ff6568;
  --color-red-500: #fb2c36;
  --color-red-600: #e40014;
  --color-red-700: #bf000f;
  --color-red-800: #9f0712;
  --color-red-900: #82181a;
  --color-orange-50: #fff7ed;
  --color-orange-100: #ffedd5;
  --color-orange-200: #ffd7a8;
  --color-orange-300: #ffb96d;
  --color-orange-400: #ff8b1a;
  --color-orange-500: #fe6e00;
  --color-orange-600: #f05100;
  --color-orange-700: #c53c00;
  --color-orange-800: #9f2d00;
  --color-orange-900: #7e2a0c;
  --color-amber-50: #fffbeb;
  --color-amber-100: #fef3c6;
  --color-amber-200: #fee685;
  --color-amber-300: #ffd236;
  --color-amber-400: #fcbb00;
  --color-amber-500: #f99c00;
  --color-amber-600: #dd7400;
  --color-amber-700: #b75000;
  --color-amber-800: #953d00;
  --color-amber-900: #7b3306;
  --color-yellow-50: #fefce8;
  --color-yellow-100: #fef9c2;
  --color-yellow-200: #fff085;
  --color-yellow-300: #ffe02a;
  --color-yellow-400: #fac800;
  --color-yellow-500: #edb200;
  --color-yellow-600: #cd8900;
  --color-yellow-700: #a36100;
  --color-yellow-800: #874b00;
  --color-yellow-900: #733e0a;
  --color-lime-50: #f7fee7;
  --color-lime-100: #ecfcca;
  --color-lime-200: #d8f999;
  --color-lime-300: #bbf451;
  --color-lime-400: #9de500;
  --color-lime-500: #80cd00;
  --color-lime-600: #62a400;
  --color-lime-700: #4b7d00;
  --color-lime-800: #3d6300;
  --color-lime-900: #35530e;
  --color-green-50: #f0fdf4;
  --color-green-100: #dcfce7;
  --color-green-200: #b9f8cf;
  --color-green-300: #7bf1a8;
  --color-green-400: #05df72;
  --color-green-500: #00c758;
  --color-green-600: #00a544;
  --color-green-700: #008138;
  --color-green-800: #016630;
  --color-green-900: #0d542b;
  --color-emerald-50: #ecfdf5;
  --color-emerald-100: #d0fae5;
  --color-emerald-200: #a4f4cf;
  --color-emerald-300: #5ee9b5;
  --color-emerald-400: #00d294;
  --color-emerald-500: #00bb7f;
  --color-emerald-600: #009767;
  --color-emerald-700: #007956;
  --color-emerald-800: #005f46;
  --color-emerald-900: #004e3b;
  --color-teal-50: #f0fdfa;
  --color-teal-100: #cbfbf1;
  --color-teal-200: #96f7e4;
  --color-teal-300: #46ecd5;
  --color-teal-400: #00d3bd;
  --color-teal-500: #00baa7;
  --color-teal-600: #009588;
  --color-teal-700: #00776e;
  --color-teal-800: #005f5a;
  --color-teal-900: #0b4f4a;
  --color-cyan-50: #ecfeff;
  --color-cyan-100: #cefafe;
  --color-cyan-200: #a2f4fd;
  --color-cyan-300: #53eafd;
  --color-cyan-400: #00d2ef;
  --color-cyan-500: #00b7d7;
  --color-cyan-600: #0092b5;
  --color-cyan-700: #007492;
  --color-cyan-800: #005f78;
  --color-cyan-900: #104e64;
  --color-sky-50: #f0f9ff;
  --color-sky-100: #dff2fe;
  --color-sky-200: #b8e6fe;
  --color-sky-300: #77d4ff;
  --color-sky-400: #00bcfe;
  --color-sky-500: #00a5ef;
  --color-sky-600: #0084cc;
  --color-sky-700: #0069a4;
  --color-sky-800: #005986;
  --color-sky-900: #024a70;
  --color-blue-50: #eff6ff;
  --color-blue-100: #dbeafe;
  --color-blue-200: #bedbff;
  --color-blue-300: #90c5ff;
  --color-blue-400: #54a2ff;
  --color-blue-500: #3080ff;
  --color-blue-600: #155dfc;
  --color-blue-700: #1447e6;
  --color-blue-800: #193cb8;
  --color-blue-900: #1c398e;
  --color-indigo-50: #eef2ff;
  --color-indigo-100: #e0e7ff;
  --color-indigo-200: #c7d2ff;
  --color-indigo-300: #a4b3ff;
  --color-indigo-400: #7d87ff;
  --color-indigo-500: #625fff;
  --color-indigo-600: #4f39f6;
  --color-indigo-700: #432dd7;
  --color-indigo-800: #372aac;
  --color-indigo-900: #312c85;
  --color-violet-50: #f5f3ff;
  --color-violet-100: #ede9fe;
  --color-violet-200: #ddd6ff;
  --color-violet-300: #c4b4ff;
  --color-violet-400: #a685ff;
  --color-violet-500: #8d54ff;
  --color-violet-600: #7f22fe;
  --color-violet-700: #7008e7;
  --color-violet-800: #5d0ec0;
  --color-violet-900: #4d179a;
  --color-purple-50: #faf5ff;
  --color-purple-100: #f3e8ff;
  --color-purple-200: #e9d5ff;
  --color-purple-300: #d9b3ff;
  --color-purple-400: #c07eff;
  --color-purple-500: #ac4bff;
  --color-purple-600: #9810fa;
  --color-purple-700: #8200da;
  --color-purple-800: #6e11b0;
  --color-purple-900: #59168b;
  --color-fuchsia-50: #fdf4ff;
  --color-fuchsia-100: #fae8ff;
  --color-fuchsia-200: #f6cfff;
  --color-fuchsia-300: #f2a9ff;
  --color-fuchsia-400: #ec6cff;
  --color-fuchsia-500: #e12afb;
  --color-fuchsia-600: #c600db;
  --color-fuchsia-700: #a600b5;
  --color-fuchsia-800: #8a0194;
  --color-fuchsia-900: #721378;
  --color-pink-50: #fdf2f8;
  --color-pink-100: #fce7f3;
  --color-pink-200: #fccee8;
  --color-pink-300: #fda5d5;
  --color-pink-400: #fb64b6;
  --color-pink-500: #f6339a;
  --color-pink-600: #e30076;
  --color-pink-700: #c4005c;
  --color-pink-800: #a2004c;
  --color-pink-900: #861043;
  --color-rose-50: #fff1f2;
  --color-rose-100: #ffe4e6;
  --color-rose-200: #ffccd3;
  --color-rose-300: #ffa2ae;
  --color-rose-400: #ff667f;
  --color-rose-500: #ff2357;
  --color-rose-600: #e70044;
  --color-rose-700: #c20039;
  --color-rose-800: #a30037;
  --color-rose-900: #8b0836;
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5dc;
  --color-gray-400: #99a1af;
  --color-gray-500: #6a7282;
  --color-gray-600: #4a5565;
  --color-gray-700: #364153;
  --color-gray-800: #1e2939;
  --color-gray-900: #101828;
  --color-gray-950: #030712;
  --color-zinc-50: #fafafa;
  --color-zinc-200: #e4e4e7;
  --color-zinc-600: #52525c;
  --color-zinc-700: #3f3f46;
  --color-zinc-800: #27272a;
  --color-zinc-900: #18181b;
  --color-white: #fff;
  --spacing: .25rem;
  --breakpoint-md: 48rem;
  --breakpoint-xl: 80rem;
  --container-xs: 20rem;
  --container-sm: 24rem;
  --container-md: 28rem;
  --container-lg: 32rem;
  --container-xl: 36rem;
  --container-2xl: 42rem;
  --container-4xl: 56rem;
  --container-7xl: 80rem;
  --text-xs: .75rem;
  --text-xs--line-height: calc(1/.75);
  --text-sm: .875rem;
  --text-sm--line-height: calc(1.25/.875);
  --text-base: 1rem;
  --text-base--line-height: 1.5;
  --text-lg: 1.125rem;
  --text-lg--line-height: calc(1.75/1.125);
  --text-xl: 1.25rem;
  --text-xl--line-height: calc(1.75/1.25);
  --text-2xl: 1.5rem;
  --text-2xl--line-height: calc(2/1.5);
  --text-3xl: 1.875rem;
  --text-3xl--line-height: 1.2;
  --text-4xl: 2.25rem;
  --text-4xl--line-height: calc(2.5/2.25);
  --text-5xl: 3rem;
  --text-5xl--line-height: 1;
  --text-6xl: 3.75rem;
  --text-6xl--line-height: 1;
  --text-7xl: 4.5rem;
  --text-7xl--line-height: 1;
  --text-8xl: 6rem;
  --text-8xl--line-height: 1;
  --text-9xl: 8rem;
  --text-9xl--line-height: 1;
  --font-weight-thin: 100;
  --font-weight-extralight: 200;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;
  --tracking-tighter: -.05em;
  --tracking-tight: -.025em;
  --tracking-normal: 0em;
  --tracking-wide: .025em;
  --tracking-wider: .05em;
  --tracking-widest: .1em;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;
  --radius-sm: .25rem;
  --radius-md: .375rem;
  --radius-lg: .5rem;
  --radius-xl: .75rem;
  --radius-2xl: 1rem;
  --radius-3xl: 1.5rem;
  --ease-in: cubic-bezier(.4, 0, 1, 1);
  --animate-spin: spin 1s linear infinite;
  --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1)infinite;
  --blur-sm: 8px;
  --default-transition-duration: .15s;
  --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  --default-font-family: var(--font-sans);
  --default-mono-font-family: var(--font-mono);
  --z-index-100: 100;
  --color-primary-50: #fff5f2;
  --color-primary-100: #fff1ee;
  --color-primary-200: #ffe4de;
  --color-primary-300: #ffd5cc;
  --color-primary-400: #ffbcad;
  --color-primary-500: #fe795d;
  --color-primary-600: #ef562f;
  --color-primary-700: #eb4f27;
  --color-primary-800: #cc4522;
  --color-primary-900: #a5371b;
  --color-secondary-50: #f0f9ff;
  --color-secondary-100: #e0f2fe;
  --color-secondary-200: #bae6fd;
  --color-secondary-300: #7dd3fc;
  --color-secondary-400: #38bdf8;
  --color-secondary-500: #0ea5e9;
  --color-secondary-600: #0284c7;
  --color-secondary-700: #0369a1;
  --color-secondary-800: #075985;
  --color-secondary-900: #0c4a6e;
}


html {
  -webkit-text-size-adjust: 100%;
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    Helvetica Neue,
    Arial,
    Noto Sans,
    sans-serif,
    Apple Color Emoji,
    Segoe UI Emoji,
    Segoe UI Symbol,
    Noto Color Emoji;
  line-height: 1.5;
  -moz-tab-size: 4;
  tab-size: 4;
  --tw-empty: '';
}

#mainContent>p {
  @apply mb-4 leading-relaxed;
}

code {
  @apply text-primary-800 dark:text-primary-500;
}

/* Checkbox/Radio */
[type='checkbox'],
[type='radio'] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 0;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
  display: inline-block;
  vertical-align: middle;
  background-origin: border-box;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  flex-shrink: 0;
  height: 1rem;
  width: 1rem;
  color: #1c64f2;
  background-color: #fff;
  border-color: #6b7280;
  border-width: 1px;
  --tw-shadow: 0 0 #0000;
}

[type='checkbox'] {
  border-radius: 0px;
}

[type='radio'] {
  border-radius: 100%;
}

[type='checkbox']:focus,
[type='radio']:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-inset: var(--tw-empty,
      /*!*/
      /*!*/
    );
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: #1c64f2;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

[type='checkbox']:checked,
[type='radio']:checked,
.dark [type='checkbox']:checked,
.dark [type='radio']:checked {
  border-color: transparent;
  background-color: currentColor;
  background-size: 0.55em 0.55em;
  background-position: center;
  background-repeat: no-repeat;
}

[type='checkbox']:checked {
  background-image: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 12'%3e %3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M1 5.917 5.724 10.5 15 1.5'/%3e %3c/svg%3e");
  background-repeat: no-repeat;
  background-size: 0.55em 0.55em;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

[type='radio']:checked {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
  background-size: 1em 1em;
}

.dark [type='radio']:checked {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
  background-size: 1em 1em;
}

[type='checkbox']:indeterminate {
  background-image: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 12'%3e %3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M0.5 6h14'/%3e %3c/svg%3e");
  background-color: currentColor;
  border-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 0.55em 0.55em;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

[type='checkbox']:indeterminate:hover,
[type='checkbox']:indeterminate:focus {
  border-color: transparent;
  background-color: currentColor;
}

/* Range */
input[type='range']::-webkit-slider-thumb {
  height: 1.25rem;
  width: 1.25rem;
  background: #1c64f2;
  border-radius: 9999px;
  border: 0;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

input[type='range']:disabled::-webkit-slider-thumb {
  background: #9ca3af;
}

.dark input[type='range']:disabled::-webkit-slider-thumb {
  background: #6b7280;
}

input[type='range']:focus::-webkit-slider-thumb {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1px;
  --tw-ring-color: rgb(164 202 254 / var(--tw-ring-opacity));
}

input[type='range']::-moz-range-thumb {
  height: 1.25rem;
  width: 1.25rem;
  background: #1c64f2;
  border-radius: 9999px;
  border: 0;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

input[type='range']:disabled::-moz-range-thumb {
  background: #9ca3af;
}

.dark input[type='range']:disabled::-moz-range-thumb {
  background: #6b7280;
}

input[type='range']::-moz-range-progress {
  background: #3f83f8;
}

input[type='range']::-ms-fill-lower {
  background: #3f83f8;
}

input[type='range'].range-sm::-webkit-slider-thumb {
  height: 1rem;
  width: 1rem;
}

input[type='range'].range-lg::-webkit-slider-thumb {
  height: 1.5rem;
  width: 1.5rem;
}

input[type='range'].range-sm::-moz-range-thumb {
  height: 1rem;
  width: 1rem;
}

input[type='range'].range-lg::-moz-range-thumb {
  height: 1.5rem;
  width: 1.5rem;
}

/* input file */
[type='file'] {
  background: unset;
  border-color: inherit;
  border-width: 0;
  border-radius: 0;
  padding: 0;
  font-size: unset;
  line-height: inherit;
}

[type='file']:focus {
  outline: 1px auto inherit;
}

input[type='file']::file-selector-button {
  color: white;
  background: #1f2937;
  border: 0;
  font-weight: 500;
  font-size: 0.875rem;
  cursor: pointer;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  padding-left: 2rem;
  padding-right: 1rem;
  -webkit-margin-start: -1rem;
  margin-inline-start: -1rem;
  -webkit-margin-end: 1rem;
  margin-inline-end: 1rem;
}

input[type='file']::file-selector-button:hover {
  background: #374151;
}

:is([dir='rtl']) input[type='file']::file-selector-button {
  padding-right: 2rem;
  padding-left: 1rem;
}

.dark input[type='file']::file-selector-button {
  color: white;
  background: #4b5563;
}

.dark input[type='file']::file-selector-button:hover {
  background: #6b7280;
}

/* select */
[type='text'],
[type='email'],
[type='url'],
[type='password'],
[type='number'],
[type='date'],
[type='datetime-local'],
[type='month'],
[type='search'],
[type='tel'],
[type='time'],
[type='week'],
[multiple],
textarea,
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #fff;
  border-color: #6b7280;
  border-width: 1px;
  border-radius: 0px;
  padding-top: 0.5rem;
  padding-right: 0.75rem;
  padding-bottom: 0.5rem;
  padding-left: 0.75rem;
  font-size: 1rem;
  line-height: 1.5rem;
  --tw-shadow: 0 0 #0000;
}

[type='text']:focus,
[type='email']:focus,
[type='url']:focus,
[type='password']:focus,
[type='number']:focus,
[type='date']:focus,
[type='datetime-local']:focus,
[type='month']:focus,
[type='search']:focus,
[type='tel']:focus,
[type='time']:focus,
[type='week']:focus,
[multiple]:focus,
textarea:focus,
select:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-inset: var(--tw-empty,
      /*!*/
      /*!*/
    );
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: #1c64f2;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  border-color: #1c64f2;
}

select:not([size]) {
  background-image: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 10 6'%3e %3cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m1 1 4 4 4-4'/%3e %3c/svg%3e");
  background-position: right 0.75rem center;
  background-repeat: no-repeat;
  background-size: 0.75em 0.75em;
  padding-right: 2.5rem;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

:is([dir='rtl']) select:not([size]) {
  background-position: left 0.75rem center;
  padding-right: 0.75rem;
  padding-left: 0;
}

.container {
  @apply m-4;
}